<template>
    {{form}}
    <h2 style="text-align: center;">登录页面</h2>
    <table class="table">
        <tbody>
            <tr class="form-inline">
                <td>用户名</td>
                <td>
                    <input type="text" v-model="form.name"  class="form-inline">
                </td>
            </tr>
            <tr class="form-inline">
                <td>密码</td>
                <td>
                    <input type="password" v-model="form.password"  class="form-inline">
                </td>
            </tr>
            <tr class="form-inline">
                <td colspan="2" style="text-align: center;">
                    <button class="btn btn-success" @click="denglu">登录</button>
                </td>
            </tr>
        </tbody>
    </table>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import "bootstrap/dist/css/bootstrap.min.css"
import router from '@/router';

const form = reactive({
  "name": "",
  "password": "",
})

const denglu = () => {
    if (!form.name) {
        alert("用户名不能为空");
        return;
    }
     if (!form.password) {
        alert("密码不能为空");
        return;
    }
    axios.post("https://localhost:7230/api/User/Denglu?name="+form.name+"&pwd="+form.password).then(res => {
        if (res.data.uid == -1) {
            alert("用户名不正确");
            return;
        }
         if (res.data.uid == -2) {
            alert("密码不正确");
            return;
         }
         if (res.data.uid == -3) {
            alert("不是管理员无法登录");
            return;
        }
        else {
             alert("登录成功");
            router.push("/showlist")
        }
    })
}

</script>